<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta content="IE=11.0000" http-equiv="X-UA-Compatible">
  <meta name="GENERATOR" content="MSHTML 11.00.10586.494"></meta> 
  <title>视频播放</title>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href='<c:url value="/share/bootstrap.css"></c:url>'>
  <link rel="stylesheet" href='<c:url value="/share/AllStyle.css"></c:url>'>
  <link rel="stylesheet" href='<c:url value="/share/video-js.css"></c:url>'>
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script type="text/javascript" src='<c:url value="/js/jquery.min.js"></c:url>'></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script type="text/javascript" src='<c:url value="/js/bootstrap.min.js"></c:url>'></script>
  <script type="text/javascript" src='<c:url value="/js/all.js"></c:url>'></script>
  <script type="text/javascript" src='<c:url value="/js/prefixfree.min.js"></c:url>'></script>
</head>
<body>
  <div class="home_header">
    <div class="Interface_center row">
      <div class="col-xs-6">
      <div class="home_header_left">
          <span><img src='<c:url value="/share/images/book.png"></c:url>'>外事办公室领事保护处教育平台</span>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="home_header_right">
          <a href="login.html">登录</a>
          <a href="reg.html">注册</a>
        </div>
      </div>
      </div>
  </div>
  <div class="video_content">
    <video class="video-js vjs-default-skin vjs-big-play-centered" id="example_video_1" preload="auto" controls="" poster='<c:url value="/share/images/2.jpeg"></c:url>' data-setup="{}">
      <!-- http://vjs.zencdn.net/v/oceans -->
        <source src="http://101.201.80.63:10000/eduPlatform/video/Style.mp4" type="video/mp4"> 
        <source src="http://101.201.80.63:10000/eduPlatform/video/Style.webm" type="video/webm">     
        <source src="http://101.201.80.63:10000/eduPlatform/video/Style.ogv" type="video/ogg">     
        <!-- <track kind="captions" src="demo.captions.vtt" srclang="en" label="English">
        Tracks need an ending tag thanks to IE9 
                  <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English">
                  Tracks need an ending tag thanks to IE9    -->
      </video>
      <div class="video_content_right">
        <a class="glyphicon glyphicon-chevron-right back_right" style="height: 100%; top: 0; line-height: 0;cursor:pointer;background: #DCDAD0;">
        	<img src='<c:url value="/share/images/Arrow.png"></c:url>' id="block_video"></img>
        </a>
        <div class="video_content_right_right">
          <div class="video_content_right_right_content_1">
          <div class="video_content_right_right_title1">
            <div class="col-xs-6 video_content_right_right_title1_a"><a href="javascript:;">课件</a></div>
            <div class="col-xs-6"><a href="javascript:;">目录</a></div>
          </div>
          <div class="video_content_right_right_content_1_content" style="height: 250px;">

            <div id="myCarousel" class="carousel slide"">
               <!-- 轮播（Carousel）指标 -->
               <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                  <li data-target="#myCarousel" data-slide-to="1"></li>
                  <li data-target="#myCarousel" data-slide-to="2"></li>
               </ol>   
               <!-- 轮播（Carousel）项目 -->
               <div class="carousel-inner">
                  <div class="item active">
                     <img src='<c:url value="/share/images/2.jpeg"></c:url>' alt="First slide">
                  </div>
                  <div class="item">
                     <img src='<c:url value="/share/images/2.jpeg"></c:url>' alt="Second slide">
                  </div>
                  <div class="item">
                     <img src='<c:url value="/share/images/2.jpeg"></c:url>' alt="Third slide">
                  </div>
               </div>
               <!-- 轮播（Carousel）导航 -->
               <a class="carousel-control left" href="#myCarousel" 
                  data-slide="prev">&lsaquo;</a>
               <a class="carousel-control right" href="#myCarousel" 
                  data-slide="next">&rsaquo;</a>
            </div> 

            <div class="carousel slide dir_Style">
                <ul>
                  <li><a href="javascript:;">1.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">2.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">3.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">4.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">5.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">6.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">7.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">8.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">9.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">10.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">11.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">12.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">13.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">14.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">15.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">16.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">17.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">18.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">19.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                  <li><a href="javascript:;">20.day01_01java课程架构及JavaSE课程体系结构介绍</a></li>
                </ul>
            </div> 
          </div>
          </div>
          <div class="video_content_right_right_content_2">
          <div class="video_content_right_right_title1">
            <div class="col-xs-6 video_content_right_right_title1_a">
              <a href="javascript:;">笔记</a>
              <!-- <a class="glyphicon glyphicon-plus create_plus" style=""><font style="top: 8px;position: relative;">创建</font></a> -->
            </div>
            <div class="col-xs-6"><a href="javascript:;">反馈</a></div>
          </div>
          <div class="video_content_right_right_content_2">
            <div class="video_content_right_right_content_2_copys">
              <div class="main"> 
                <div class="sidebar">
                  <div class="exitMenu">
                    <div class="finishButton">
                      <a href="javascript:void(0);" id="publish" class="col-xs-4">发布</a>
                      <a href="javascript:void(0);" id="save" class="col-xs-4">保存草稿</a>
                      <a href="javascript:void(0);" id="delete" class="col-xs-4">删除草稿</a>
                    </div>
                  </div>
                </div>
                <div class="content" style="padding: 2px;">
                <p id="contentText" contenteditable="true">记录笔记...</p>
                </div>
              </div>
            </div>
            <div class="video_content_right_right_content_2_copys video_content_right_right_content_2_copys_r" style="padding: 10px;">
              <div class="r" style="position: relative; overflow: hidden;">
                        <div class="zh5">
                              <ul id="zh5ul" class="zh5ul">
                                  <li val="1" class=""></li>
                                  <li val="2" class=""></li>
                                  <li val="3" class=""></li>
                                  <li val="4" class=""></li>
                                  <li val="5" class=""></li>
                              </ul>
                              <div id="zh5_red" data_star=""></div>
                          </div>
                        <span class="des">可接受度</span>
                      </div>
                      <div class="r">
                      <div class="zh5">
                             <ul id="zh5ul_2" class="zh5ul_2">
                                 <li val="1" class=""></li>
                                 <li val="2" class=""></li>
                                 <li val="3" class=""></li>
                                 <li val="4" class=""></li>
                                 <li val="5" class=""></li>
                             </ul>
                             <div id="zh5_red_2" data_star=""></div>
                         </div>
                      <span class="des">课程内容质量</span>
                     </div>
            </div>
          </div>
        </div>
        </div>
      </div>
  </div>

  <script src='<c:url value="/js/video.js"></c:url>'></script>
    <script type="text/javascript">
    videojs.options.flash.swf = "http://101.201.80.63:10000/eduPlatform/video/Style.swf";
    var myVid = document.getElementById("example_video_1");
    var video = localStorage.getItem("video");
    //上次播放时间段
    myVid.currentTime = video;
    console.log(video);
    $(document).ready(function(){
        $(window).bind("beforeunload",function(){
        	var video = localStorage.getItem("video");
        	console.log(video);
        });
    });
    //视频进行ajax交互过程
    //页面关闭时调用
	/* $(window).unload(function(){
	    storeChangeRealTime();
	});
	
	//页面刷新时调用
	$(window).on('beforeunload', function(event) {
	    storeChangeRealTime();
	});
	
	//前端页面内容修改触发
	var timerId = null;//记录定时器名称
	function haveModified(){
	    //做一些事情
	    $.cookie('projectlist_modify_flag', 1);//重新设置cookie，1表示：有修改
	    //定时器
	    clearTimeout(timerId);//清除之前的定时器（为了重新计时，否则会有多个定时器同时进行，传递多次数据）
	    timerId = setTimeout(storeChangeDelay, 10000);//设置定时器
	} 
	
	function storeChangeDelay(){
	    $.ajax({
	        type:"POST",
	        dataType:"json",
	        data:{projectId:projectId,projectLists:arrProjectNodes},
	        url:'Project/Project/modifyProject',
	        success:function (data) {
	            if (data.errno == 0) {
	                $.cookie('projectlist_modify_flag', 0);//修改的内容已经保存，将该cookie置为0
	            } else {
	                console.log('there are some errors in project.js:storeChange ajax' + data.errno + ': ' + data.msg);
	            }
	        },
	        error:function (er) {
	            console.log('some error in project.js:storeChange ajax');
	        }
	    });
	}
	
	function storeChangeRealTime(){
	    $.ajax({
	        async:false,//这是与storeChangeDelay不同的地方，表示使用同步方式传输数据
	        type:"POST",
	        dataType:"json",
	        data:{projectId:projectId,projectLists:arrProjectNodes},
	        url:'Project/Project/modifyProject',
	        success:function (data) {
	            if (data.errno == 0) {
	                $.cookie('projectlist_modify_flag', 0);//修改的内容已经保存，将该cookie置为0
	            } else {
	                console.log('there are some errors in project.js:storeChange ajax' + data.errno + ': ' + data.msg);
	            }
	        },
	        error:function (er) {
	            console.log('some error in project.js:storeChange ajax');
	        }
	    });
	} */
    
    /*if(video > 0){
    	$("#example_video_1").attr("poster","");
    }*/
    //初始化配置
    videojs(myVid,{
        techOrder : ["html5","flash"],
        children : {
          // bigPlayButton : false,
            textTrackDisplay : false,
            posterImage: false,
            errorDisplay : false,
            controlBar : {
                captionsButton : false,
                chaptersButton: false,
                subtitlesButton:false,
                liveDisplay:false,
                playbackRateMenuButton:false
            }
        }
    },function(){
        //console.log(this)
    });

  //事件响应
  var player = videojs('example_video_1');
  // 检测播放时间
  player.on('timeupdate', function () {  
    localStorage.setItem("video",player.currentTime());
      // 如果 currentTime() === duration()，则视频已播放完毕
      if (player.duration() != 0 && player.currentTime() === player.duration()) {
          // 播放结束
      	  //console.log('播放结束时间：' + player.currentTime());
      }
    });
  // 开始或恢复播放
  player.on('play', function() {  
    $(".vjs-default-skin.vjs-has-started .vjs-big-play-button").hide();
  });
  // 暂停播放
  player.on('pause', function() {  
      console.log(video);
    $(".vjs-default-skin.vjs-has-started .vjs-big-play-button").show();
  });

  // 右侧栏展开收缩
  $(".back_right").click(function(){
    //第一次点击收缩
    if(!$(this).is(".shrink")){
      $(this).addClass("shrink back_right_rotate");
      $("#example_video_1").css({
        width: $(window).width() - $(".back_right").width(),
      });
      $(".video_content_right_right").hide();
    }else{
      $(this).removeClass("shrink back_right_rotate");
      $("#example_video_1").css({
        width: $(window).width() - 325+"px",
      });
      $(".video_content_right_right").show();
    }
  });

  //视频高度、宽度获取设置
  $("#example_video_1").css({
    width: $(window).width() - 325+"px",
    height: $(window).height() - 55+"px"
  });

  //展开收缩高度、宽度获取设置
  $(".back_right").css({
    height: $(window).height() - 55+"px"
  })

  //右侧栏
  $(".video_content_right_right").css({
    // width: $(window).width() - $("#example_video_1").width() - $(".back_right").width(),
    height: $(window).height() - 55+"px"
  });

  //屏幕实时更新高度和宽度
  $(window).resize(function(){
    $("#example_video_1").css({
      width: $(window).width() - 325+"px",
      height: $(window).height() - 55+"px"
    });
  });

  //课件目录切换
  $(".video_content_right_right_content_1>.video_content_right_right_title1>div").click(function(){
    var index = $(this).index();
    $(".video_content_right_right_content_1>.video_content_right_right_title1>div").removeClass("video_content_right_right_title1_a");
    $(this).addClass("video_content_right_right_title1_a");
    $(".video_content_right_right_content_1 .video_content_right_right_content_1_content>div").hide();
    $(".video_content_right_right_content_1 .video_content_right_right_content_1_content>div:eq("+ index +")").show();
  });

  //笔记提问切换
  $(".video_content_right_right_content_2>.video_content_right_right_title1>div").click(function(){
    var index = $(this).index();
    $(".video_content_right_right_content_2>.video_content_right_right_title1>div").removeClass("video_content_right_right_title1_a");
    $(this).addClass("video_content_right_right_title1_a");
    $(".video_content_right_right_content_2>.video_content_right_right_content_2_copys").hide();
    $(".video_content_right_right_content_2>.video_content_right_right_content_2_copys:eq("+ index +")").show();
  });

  //可接受度星级评定
  $("#zh5ul li").each(function(index, element) {
          var _this = $(this);
          var nowStar = _this.attr("val");
          _this.hover(function() {
              $("#zh5_red").attr("class", "cur" + nowStar);
          });

          _this.on("click", function() {
              $("#zh5_red").attr("data_star", nowStar);
              _this.parent().parent().next().removeClass("error");
          })
      });

      $("#zh5ul").on("mouseout", function() {
          if ($("#zh5_red").attr("data_star")) {
              $("#zh5_red").attr("class", "cur" + $("#zh5_red").attr("data_star"));
          } else {
              $("#zh5_red").removeClass();
          }
      });

      //课程内容质量星级评定
      $("#zh5ul_2 li").each(function(index, element) {
          var _this = $(this);
          var nowStar = _this.attr("val");
          _this.hover(function() {
              $("#zh5_red_2").attr("class", "cur" + nowStar);
          });

          _this.on("click", function() {
              $("#zh5_red_2").attr("data_star", nowStar);
              _this.parent().parent().next().removeClass("error");
          })
      });

      $("#zh5ul_2").on("mouseout", function() {
          if ($("#zh5_red_2").attr("data_star")) {
              $("#zh5_red_2").attr("class", "cur" + $("#zh5_red_2").attr("data_star"));
          } else {
              $("#zh5_red_2").removeClass();
          }
      });
      
  </script>

	<!-- 笔记文本框编辑保存、发布、清空 -->
  <script>

		$( "#contentText" ).keyup(function() {
		  $( "#exitMenuCheckbox" ).prop('checked', true);
		});

		$( "#bold" ).change(function() {
		  if($('#bold').prop('checked')){
		    $("#contentText").css("font-weight","bold");
		  }else{
		    $("#contentText").css("font-weight","normal");
		  }
		});

		$( "#italic" ).change(function() {
		  if($('#italic').prop('checked')){
		    $("#contentText").css("font-style","italic");
		  }else{
		    $("#contentText").css("font-style","normal");
		  }
		});

		$( "#underline" ).change(function() {
		  if($('#underline').prop('checked')){
		    $("#contentText").css("text-decoration","underline");
		  }else{
		    $("#contentText").css("text-decoration","none");
		  }
		});

		$( "#left" ).click(function() {
		  $("#contentText").css("text-align","left");
		});
		$( "#center" ).click(function() {
		  $("#contentText").css("text-align","center");
		});
		$( "#right" ).click(function() {
		  $("#contentText").css("text-align","right");
		});
		$( "#justify" ).click(function() {
		  $("#contentText").css("text-align","justify");
		});

		$(document).on('scroll', function() {
		   $( "#exitMenuCheckbox" ).prop('checked', true);
		});

		$( "#publish" ).mouseup(function() {
		  $("#articleHeaderName").text($("h1").text());
		});

		$( "#save" ).mouseup(function() {
		  $("#articleHeaderName").text($("h1").text()+" (Draft)");
		});

		$( "#delete" ).mouseup(function() {
		  $("#articleHeaderName").text("Create New Article");
		  $("h1").text("Simple blog editor - A great way of learning");
		  $("#contentText").text("");
		});
</script>
</body>
</html>